<template>
	<view class="fullPage p30">
		<view class="container p24 bf border-r1">
			<view class="flex_aj ptb30">
				<view class="flex_aj w230 h230 b-green border-r50p">
					<image src="/static/mbile-full.png" mode="widthFix" style="width: 128upx;height: 98upx;"></image>
				</view>
			</view>
			<view class="mb30 plr24 pb30 bgf5 border-r1">
				<view class="flex_sb h80 bdb">
					<text>租借记录</text>
					<text>{{info.ctime }}</text>
				</view>
				<view>
					<view class="flex_a h70">
						<text class="flex1">车辆二维码编号：{{info.deviceNo}}</text>
						<view class="w50 h50" @click="navigation">
							<image src="/static/daohang.png" mode="widthFix" style="width: 50upx;height: 50upx;">
							</image>
						</view>
					</view>
					<view class="c6">{{info.deviceAddress}}</view>
				</view>
			</view>
			<view class="pt10 bdt">
				<view class="flex pt20 mb10">
					<text class="whn">订单编号：</text>
					<text class="flex1">
						{{ info.orderNo }}
						<text class="plr10 warning ft26" v-if="info.status == 2">请及时归还车辆</text>
					</text>
					<text
						:class="info.status == 0 ? 'warning' : info.status == 2 ? 'danger' : info.status == 1 ? 'green' : ''">
						{{ info.status == 0 ? '租赁中' : info.status == 2 ? '已逾期' : info.status == 1 ? '已完成' : '--' }}
					</text>
				</view>
				<view class="mb10">套餐电池类型：{{ info.batteryTypeName }}V</view>
				<view class="mb10">套餐开始时间：{{ info.startTime}}</view>
				<view class="mb10">套餐结束时间：{{ info.mealTime}}</view>
				<view class="mb10">租赁时长：{{info.rentTime}}小时</view>
				<view class="flex mb10">
					<text class="whn">电池押金：</text>
					<view class="flex1 flex">
						<text class="whn">{{ info.deposit }}元</text>
						<view class="pl10 ft24 c9">
							(套餐结束后可以在
							<text class="primary"
								@click="routerLink({ path: '/pages/user/wallet/index' })">“我的钱包”</text>
							中提现）
						</view>
					</view>
				</view>
				<view class="flex mb10">
					<text class="whn">车辆押金：</text>
					<view class="flex1 flex">
						<text class="whn">{{ info.carDeposit }}元</text>
						<view class="pl10 ft24 c9">
							(套餐结束后可以在
							<text class="primary"
								@click="routerLink({ path: '/pages/user/wallet/index' })">“我的钱包”</text>
							中提现）
						</view>
					</view>
				</view>

				<view class="mb10">
					套餐费用：
					<text class="warning">{{info.mealMoney}}元</text>
				</view>
				<!-- 已逾期 -->
				<view class="mb10" v-if="info.overdueTime">
					逾期费用：
					<text class="warning">{{info.overduePay}}元</text>
					<text class="ft24 c9">（已逾期{{info.overdueTime}}天）</text>
				</view>
				<view class="mb10" v-if="info.excOrderNo">
					绑定换电订单：
					<text class="primary"
						@click="routerLink({path:'/pages/user/myOrder/rentEleDetail',query: {orderNo:info.excOrderNo}})">{{info.excOrderNo}}</text>
				</view>
				<!-- 已完成 -->
				<view v-if="info.status==1">
					<view class="mb10">归还时间：{{info.etime | formatTime}}</view>
					<view class="flex mb10">
						<text class="whn">归还站点：</text>
						<view class="flex1 primary">{{info.siteName}}</view>
					</view>
				</view>
			</view>

			<view class="pt100" v-if="info.status != 1">
				<view class="mb20 plr60" v-if="info.status==2">
					<u-button type="primary" shape="circle">立即续费</u-button>
				</view>
				<view class="mb20 plr60">
					<u-button type="primary" :plain="info.status==0?false: true" shape="circle" @click="returnCar">归还车辆
					</u-button>
				</view>

				<view class="mb20 c9 tac ft22">
					<view class="mb10">请在套餐结束前及时归还车辆!</view>
					<view class="">
						<text>否则将收取{{info.overduePrice}}元/天的逾期费，详情请看</text>
						<text class="primary"
							@click="routerLink({path: '/pages/user/rentCar/protocol',query: {deviceNo:info.deviceNo}})">《租赁车辆套餐协议》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rentCarOrderDetail,
		returnCar
	} from '@/api/user.js'
	export default {
		name: 'chargeDetail',
		data() {
			return {
				orderNo: '',
				info: {}
			}
		},
		onLoad(e) {
			this.orderNo = e.orderNo || '1000000337934634'
			this.rentCarOrderDetail()
		},
		methods: {
			async rentCarOrderDetail() {
				const res = await rentCarOrderDetail({
					orderNo: this.orderNo
				})
				this.info = res.data
			},
			async returnCar() {
				const res = await returnCar({
					orderNo: this.orderNo
				})
				this.confirm({
					content: res.msg,
					showCancel: false
				})
			},

			navigation() {
				// 因后端传过来的经纬度是百度的，所以要经过转化成腾讯经纬度
				// let lng = this.info.lng
				// let lat = this.info.lat
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.getLocation({
					type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
					success: (res) => {
						uni.openLocation({
							scale: 18,
							latitude: this.info.lat * 1,
							longitude: this.info.lng * 1,
							// name: this.info.title,
							// address: this.info.address,
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss"></style>
